<template>
  <div class="login-container">
    <div class="form-box">
      <h1 class="form-box__title">
        <img src="/favicon.ico" />
        {{ VITE_APP_TITLE }}
      </h1>

      <div class="form-box__container">
        <ElInput
          v-model="loginForm.name"
          type="text"
          size="large"
          prefix-icon="icon-user"
          autocomplete="username"
          placeholder="用户名"
        />
        <ElInput
          v-model="loginForm.password"
          type="password"
          size="large"
          prefix-icon="icon-lock"
          autocomplete="current-password"
          placeholder="密码"
        />
      </div>

      <div class="form-box__footer">
        <el-button
          type="primary"
          size="large"
          :loading="loginLoading"
          @click="login"
          >登 录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import config from '@/config'
import { useLogin } from './hooks/useLogin'
import { useSSOLogin } from './hooks/useSSOLogin'

defineOptions({
  name: config.routeLoginName
})

const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE

useSSOLogin()

const { loginLoading, loginForm, login } = useLogin()
</script>

<style scoped lang="scss">
@use 'login';
</style>
